// Preview pane

#preview {
    position:absolute;
    top:0;
    left:0%;
    bottom:0;
    width:100%;
    overflow-y: auto;
    overflow-x:hidden;
    outline: none;
    transition:0.3s left ease;

    &.hidden { left:100%; }

    ul {
        list-style-type: none;
        margin-left:0px;
        padding-left:0px;

        li {
            margin-top:-1px;
            overflow:hidden;
            line-height:@tile-height-min;
            padding-left:6px;
            position:relative;

            // Bigger size when snippets are on.
            &.snippets {
                height:@tile-height-full - (2*@pane-padding); // Remove top/bottom padding
                padding:@pane-padding;
                line-height:inherit;
            }

            p.filename {
                // Prevent line breaking in the titles and give a little spacing
                // before and after
                white-space: nowrap;
                display: block;
                width: 100%;
                overflow: hidden;
            }

            p.snippet {
              margin-top: 5px;
              white-space: nowrap;

              // Small info blocks inside the snippets
              .date, .id, .tags, .directories, .files, .virtual-directories,
              .tex-indicator {
                font-size:75%;
                border-radius:4px;
                padding:2px 4px;
              }

              // Optional target progress meter, if a target has been set
              .target-progress-indicator {
                vertical-align: bottom;
                margin: 0 4px;
                transform: rotateZ(-90deg); // Beginning must be at the top
              }

              .directories, .files, .virtual-directories {
                margin: inherit 2px;
                display: inline-block;
              }
            }

            /* Taglist stuff */
            .taglist {
                position:absolute;
                top: 0;
                bottom: 0;
                right:10px;
                display:flex;
                align-items:center;
                width:@tag-size;
                justify-content: space-between;
                transition:0.2s width ease;

                .tag {
                    height:@tag-size;
                    width:auto;
                    margin:0 auto;
                    transition:0.2s all ease-out;
                }

                &:hover {
                    width:100%;
                    right: 0;
                    transition:0.2s width ease;
                    opacity:1;

                    .tag {
                        width:@tag-size;
                        border-radius:50%;
                        transition:0.2s all ease-in;
                    }
                }

                .tagspacer {
                    flex-grow:1;
                    text-align:center;
                    overflow:hidden;
                }

                .tagspacer:only-child .tag {
                    width:25px;
                    border-radius:50%;
                }
            }

            &.directory, &.virtual-directory {
                white-space: nowrap;

                .sorter {
                    display:block;
                    position:absolute;
                    top:0;
                    left:0;
                    bottom:0;
                    right:0;
                    text-align: right;
                    margin:0;
                }

                span.sortTime, span.sortName {
                    font-family: @font-icon;
                    font-size:@font-size-small * 0.8;
                    padding:0 0.5em;
                    display:inline-block;
                    margin-top:0px; // Overwrite margin of the spans
                }
            }
        }
    }
}
